<template>
  <div id='admin'>
    <v-titletop>
      <span
        class='titleh'>用户名:</span>
      <el-input
        placeholder="请输入内容">
      </el-input>
      <span
        class='titleh'>用户ID:</span>
      <el-input
        placeholder="请输入内容">
      </el-input>
      <el-button
        type="primary">查找
      </el-button>
    </v-titletop>

    <v-titlebottom>
      <el-button
        type="primary"
        @click='add'>
        创建用户
      </el-button>
      <template style='auto'>
        <el-table
          :data="users"
          height="auto" border
          style="width: 98.5%">
          <el-table-column
            label="用户ID"
            prop='_id'
            width="180">
          </el-table-column>
          <el-table-column
            label="用户名"
            prop="username"
            width="180">
          </el-table-column>

          <el-table-column
            prop='email'
            label="用户邮箱">
          </el-table-column>
          <el-table-column
            prop='phone'
            label="用户电话">
          </el-table-column>
          <el-table-column
            label="操作">
            <template
              slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">
                修改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </v-titlebottom>
    <keep-alive>
      <component :is='comname'
        v-if='flag'
        @func='send'
        @get='getuserlist'
        :cominfo='cominfo'>
        <h4>{{cominfo}}</h4>
      </component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'admin',
  components: {
    'v-titletop': () => import('@/components/title-top'),
    'v-titlebottom': () => import('@/components/title-bottom'),
    add: () => import('@/components/commons/add'),
    updata: () => import('@/components/commons/updata'),
  },
  data() {
    return {
      users: [],
      comname: '',
      cominfo: '',
      flag: false,
    }
  },
  created() {
    this.getuserlist()
  },
  methods: {
    handleEdit(index, row) {
      this.cominfo = '更新用户'
      this.$store.state.userinfo = row
      this.flag = true
      this.comname = 'updata'
    },
    handleDelete(index, row) {
      this.$axios({
        method: 'post',
        url: '/manage/user/delete',
        params: {
          userId: row._id,
        },
      }).then((res) => {
        if (res.data.status == 2) {
          this.$message.error('请勿删除自己')
        } else if (res.data.status == 0) {
          this.$confirm('此操作将永久删除该文件, 是否继续?').then(() => {
            this.$message.success('删除成功')
            this.getuserlist()
          })
        }
      })
    },
    add() {
      this.flag = true
      this.comname = 'add'
      this.cominfo = '新增用户'
    },
    send(data) {
      this.flag = data
    },
    getuserlist() {
      this.$axios({
        method: 'get',
        url: '/manage/user/list',
      }).then((res) => {
        this.users = res.data.data.users
      })
    },
  },
}
</script>

<style lang='less'>
#admin {
  padding: 10px;
  padding-right: 10px;
}
</style>